<template>
  <div class="app-container">
    <el-form
        :model="queryForm"
        ref="queryFormRef"
        :inline="true"
        label-width="70px"
    >
      <el-form-item label="岗位编码" prop="postCode">
        <el-input
            v-model="queryForm.postCode"
            placeholder="请输入岗位编码"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="岗位名称" prop="postName">
        <el-input
            v-model="queryForm.postName"
            placeholder="请输入岗位名称"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="queryForm.status"
            placeholder="岗位状态"
            clearable
            @change="handleQuery"
        >
          <el-option
              v-for="dict in statusOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-button @click="resetClick">重置</el-button>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            size="small"
            @click="handleAdd"
        >新增
        </el-button>
      </el-col>


      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            size="small"
            @click="handleDelete"
        >删除
        </el-button>
      </el-col>
    </el-row>
    <Table
        :isSelect="true"
        :table-data="tableData"
        :table-column="tableColumn"
        @pagination-change="getList"
        v-model:page-num="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :total="total">
      <template #edit="{row}">
        <el-link
            :underline="false"
            class="el-link-spacing"
            size="small"
            type="primary"
            icon="edit"
            @click="handleUpdate(row)"
        ><span class="table_link_text">修改</span></el-link
        >
        <el-link
            :underline="false"
            class="el-link-spacing"
            size="small"
            type="danger"
            icon="delete"
            @click="handleDelete(row)"
        ><span class="table_link_text">删除</span></el-link
        >
      </template>
    </Table>


    <!-- 添加或修改岗位对话框 -->
    <el-dialog
        :title="title"
        v-model="open"
        width="30%"
        append-to-body
    >
      <el-form
          ref="formRef"
          :model="form"
          :inline="true"
          :rules="rules"
          label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位名称" prop="postName">
              <!-- prettier-ignore -->
              <el-input v-model="form.postName" placeholder="请输入岗位名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位编码" prop="postCode">
              <el-input v-model="form.postCode" placeholder="请输入编码名称"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="岗位顺序" prop="postSort">
              <!-- prettier-ignore -->
              <el-input-number v-model="form.postSort" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                    v-for="dict in statusOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                >{{ dict.label }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注"
                  :autosize="{ minRows: 4, maxRows: 8 }"
                  style="width:100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <!-- prettier-ignore -->
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {getCurrentInstance, onMounted, ref} from "vue";
import {ElForm, ElMessage, ElMessageBox} from "element-plus";
import {listRole} from "@/api/system/role.ts";
import {resetForm} from "@/utils/z.ts";
import {addPost, delPost, getPost, listPost, updatePost} from "@/api/system/post.ts";
import Table from "@/components/Table/ElTable.vue";

onMounted(() => {
  getList()
})
const {proxy} = getCurrentInstance() as any;
// 选中数组
const ids = ref<any>();
// 总条数
const total = ref<number>(0);
// 岗位表格数据
const postList = ref<any>();
// 弹出层标题
const title = ref<string>("");
// 是否显示弹出层
const open = ref<boolean>(false);
// 状态数据字典
const statusOptions = ref<any>([
  {
    value: "0",
    label: "正常",
  }, {
    value: "1",
    label: "停用",
  },
]);
// 查询参数
const queryForm = ref({
  pageNum: 1,
  pageSize: 10,
  postCode: undefined,
  postName: undefined,
  status: undefined,
});
// 表单参数
const form = ref<any>();
const formRef = ref<InstanceType<typeof ElForm>>();
const queryFormRef = ref<InstanceType<typeof ElForm>>();
// 表单校验
const rules = ref({
  postName: [
    {
      required: true,
      message: "岗位名称不能为空",
      trigger: "blur",
    },
  ],
  postCode: [
    {
      required: true,
      message: "岗位编码不能为空",
      trigger: "blur",
    },
  ],
  postSort: [
    {
      required: true,
      message: "岗位顺序不能为空",
      trigger: "blur",
    },
  ],
});
const tableData = ref<Array<Object>>([])

const tableColumn = ref<Array<Object>>([
  {
    label: '岗位编号',
    prop: 'postId',

  },
  {
    label: '岗位编码',
    prop: 'postCode',

  },
  {
    label: '岗位名称',
    prop: 'postName',

  }, {
    label: '岗位排序',
    prop: 'postSort',
  }, {
    label: '状态',
    prop: 'status',
  }, {
    label: '备注',
    prop: 'remark',
  }, {
    label: '创建时间',
    prop: 'createTime',
  }, {
    label: '操作',
    prop: 'edit',
    slot: true,
  },
])
const handleQuery = () => {
  getList()
}
const resetClick = () => {
  getList()
}
const getList = () => {
  listPost(queryForm.value).then(
      (response: any) => {
        tableData.value = response.rows;
        total.value = parseInt(response.total);
      }
  );
}
/** 修改按钮操作 */
const handleUpdate = (row: any) => {
  reset();
  const postId = row.postId || ids.value;
  getPost(postId).then((response: any) => {
    response.data.postSort = parseInt(response.data.postSort);
    form.value = response.data;
    title.value = "修改岗位";
    open.value = true;
  });
};
/** 删除按钮操作 */
const handleDelete = (row: any) => {
  const postIds = row.postId || ids.value;
  // prettier-ignore
  ElMessageBox.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', "警告")
      .then(() => {
        return delPost(postIds);
      })
      .then((response: any) => {
        if (response.code === 200) {
          ElMessage({message: "删除成功", type: 'success'})
          getList();
        }
      })
      .catch(() => {
        console.log("取消了删除");
      });
};
/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  title.value = "添加岗位";
  open.value = true;
};
/** 提交按钮 */
const submitForm = async () => {
  await formRef.value?.validate((valid) => {
    if (valid) {
      if (form.value.postId !== undefined) {
        updatePost(form.value)
            .then((response: any) => {
              if (response.code === 200) {
                ElMessage({message: "修改成功", type: 'success'})
              }
            })
            .finally(() => {
              open.value = false;
              getList();
            });
      } else {
        addPost(form.value)
            .then((response: any) => {
              if (response.code === 200) {
                ElMessage({message: "新增成功", type: 'success'})
              }
            })
            .finally(() => {
              open.value = false;
              getList();
            });
      }
    }
  });
};
// 取消按钮
const cancel = () => {
  reset();
  open.value = false;
};
// 表单重置
const reset = () => {
  form.value = {
    postId: undefined,
    postCode: undefined,
    postName: undefined,
    postSort: 0,
    status: "0",
    remark: undefined,
  };
  resetForm(formRef);
};
</script>


<style scoped>

</style>
